<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 5.2.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/img/16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/img/32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/img/16x16.png">
  <link rel="mask-icon" href="/img/logo.png" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free@6.3.0/css/all.min.css" integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"lirifa.github.io","root":"/","images":"/images","scheme":"Mist","darkmode":true,"version":"8.15.0","exturl":false,"sidebar":{"position":"right","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"mac"},"bookmark":{"enable":true,"color":"#2bb5d4","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"livere","storage":true,"lazyload":false,"nav":null,"activeClass":"livere"},"stickytabs":false,"motion":{"enable":false,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="基本用法video 标签最基本的使用是，指定src并加上controls属性，这样在支持的浏览器上便可以播放了。如果浏览器不支持video标签则会显示标签中的提示文字">
<meta property="og:type" content="article">
<meta property="og:title" content="H5 video开发问题及相关知识点">
<meta property="og:url" content="https://lirifa.github.io/H5-video%E5%BC%80%E5%8F%91%E9%97%AE%E9%A2%98%E5%8F%8A%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9.html">
<meta property="og:site_name" content="Rafa&#39;s Blog">
<meta property="og:description" content="基本用法video 标签最基本的使用是，指定src并加上controls属性，这样在支持的浏览器上便可以播放了。如果浏览器不支持video标签则会显示标签中的提示文字">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-01-05T02:41:50.000Z">
<meta property="article:modified_time" content="2025-11-11T03:34:17.337Z">
<meta property="article:author" content="Rafa">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="https://lirifa.github.io/H5-video%E5%BC%80%E5%8F%91%E9%97%AE%E9%A2%98%E5%8F%8A%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9.html">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://lirifa.github.io/H5-video%E5%BC%80%E5%8F%91%E9%97%AE%E9%A2%98%E5%8F%8A%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9.html","path":"H5-video开发问题及相关知识点.html","title":"H5 video开发问题及相关知识点"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>H5 video开发问题及相关知识点 | Rafa's Blog</title>
  

  <script src="/js/third-party/analytics/baidu-analytics.js"></script>
  <script async src="https://hm.baidu.com/hm.js?e65b95711a0ae7fa2a5d53e3186cff24"></script>







  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">Rafa's Blog</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">角落</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-留言"><a href="/guestbook/" rel="section"><i class="fa fa-book fa-fw"></i>留言</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95"><span class="nav-text">基本用法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8source%E6%A0%87%E7%AD%BE"><span class="nav-text">使用source标签</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%B1%9E%E6%80%A7%EF%BC%8C%E6%BB%A1%E8%B6%B3%E9%9C%80%E6%B1%82"><span class="nav-text">配置多个属性，满足需求</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#video%E7%82%B9%E6%92%AD%E4%B8%8E%E7%9B%B4%E6%92%AD"><span class="nav-text">video点播与直播</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#video%E4%B8%8E206%E7%8A%B6%E6%80%81%E7%A0%81"><span class="nav-text">video与206状态码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%88%E6%AD%A2%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD"><span class="nav-text">终止视频下载</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%87%E6%8D%A2src%E5%9C%B0%E5%9D%80%E5%90%8E%E9%87%8D%E6%96%B0%E5%8A%A0%E8%BD%BD%E6%92%AD%E6%94%BE"><span class="nav-text">切换src地址后重新加载播放</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%98%B2%E6%AD%A2iOS%E4%B8%8A%E9%BB%98%E8%AE%A4%E5%85%A8%E5%B1%8F%E6%92%AD%E6%94%BE"><span class="nav-text">防止iOS上默认全屏播放</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%E5%8F%8A%E6%92%AD%E6%94%BE%E6%8E%A7%E5%88%B6"><span class="nav-text">自动播放及播放控制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#video-play-%E7%9A%84Promise%E5%AF%B9%E8%B1%A1%EF%BC%88%E5%8F%AF%E7%94%A8%E4%BA%8E%E6%8D%95%E8%8E%B7%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E9%94%99%E8%AF%AF%EF%BC%89"><span class="nav-text">video.play() 的Promise对象（可用于捕获视频播放错误）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#TimeRanges-%E5%AF%B9%E8%B1%A1"><span class="nav-text">TimeRanges 对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link"><span class="nav-text">|&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;|  |&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;| |</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Rafa"
      src="https://avatars.githubusercontent.com/u/44889418?v=4">
  <p class="site-author-name" itemprop="name">Rafa</p>
  <div class="site-description" itemprop="description">角落</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">10</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">6</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <a href="https://github.com/lirifa" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lirifa" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:rafa_im@163.com" title="E-Mail → mailto:rafa_im@163.com" rel="noopener me" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://lirifa.github.io/H5-video%E5%BC%80%E5%8F%91%E9%97%AE%E9%A2%98%E5%8F%8A%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://avatars.githubusercontent.com/u/44889418?v=4">
      <meta itemprop="name" content="Rafa">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Rafa's Blog">
      <meta itemprop="description" content="角落">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="H5 video开发问题及相关知识点 | Rafa's Blog">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          H5 video开发问题及相关知识点
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-01-05 10:41:50" itemprop="dateCreated datePublished" datetime="2021-01-05T10:41:50+08:00">2021-01-05</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2025-11-11 11:34:17" itemprop="dateModified" datetime="2025-11-11T11:34:17+08:00">2025-11-11</time>
    </span>

  
    <span class="post-meta-break"></span>
    <span class="post-meta-item" title="本文字数">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">本文字数：</span>
      <span>4.1k</span>
    </span>
    <span class="post-meta-item" title="阅读时长">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">阅读时长 &asymp;</span>
      <span>4 分钟</span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h2><p>video 标签最基本的使用是，指定src并加上controls属性，这样在支持的浏览器上便可以播放了。如果浏览器不支持video标签则会显示标签中的提示文字</p>
<a id="more"></a>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">src</span>=<span class="string">&quot;http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4&quot;</span> <span class="attr">controls</span>&gt;</span></span><br><span class="line">    当前浏览器不支持video标签</span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>提示文字可以再放在其他标签中，如再套个p标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">src</span>=<span class="string">&quot;http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4&quot;</span> <span class="attr">controls</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span> 当前浏览器不支持video标签 <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="使用source标签"><a href="#使用source标签" class="headerlink" title="使用source标签"></a>使用source标签</h2><p>source标签可以为同一video元素指定不同的视频格式（来源），让浏览器自行选择自己支持的格式播放，不支持的视频源会被忽略</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">controls</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;some-video.mp4&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/mp4&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;some-video.ogg&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/ogg&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span> 当前浏览器不支持video标签 <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h2 id="配置多个属性，满足需求"><a href="#配置多个属性，满足需求" class="headerlink" title="配置多个属性，满足需求"></a>配置多个属性，满足需求</h2><p>给video标签设置属性，以满足一定的需求，如loop进行循环播放，width指定video的宽度<br><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/tags/tag_video.asp">属性详情</a></p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">值</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">autoplay</td>
<td align="left">autoplay</td>
<td align="left">如果出现该属性，则视频在就绪后马上播放。</td>
</tr>
<tr>
<td align="left">controls</td>
<td align="left">controls</td>
<td align="left">如果出现该属性，则向用户显示控件，比如播放按钮。</td>
</tr>
<tr>
<td align="left">width</td>
<td align="left">pixels</td>
<td align="left">设置视频播放器的宽度。</td>
</tr>
<tr>
<td align="left">height</td>
<td align="left">pixels</td>
<td align="left">设置视频播放器的高度。</td>
</tr>
<tr>
<td align="left">loop</td>
<td align="left">loop</td>
<td align="left">如果出现该属性，则当媒介文件完成播放后再次开始播放。</td>
</tr>
<tr>
<td align="left">muted</td>
<td align="left">muted</td>
<td align="left">规定视频的音频输出应该被静音。</td>
</tr>
<tr>
<td align="left">poster</td>
<td align="left">URL</td>
<td align="left">规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。</td>
</tr>
<tr>
<td align="left">preload</td>
<td align="left">preload</td>
<td align="left">如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。</td>
</tr>
<tr>
<td align="left">src</td>
<td align="left">url</td>
<td align="left">要播放的视频的 URL。</td>
</tr>
</tbody></table>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span></span></span><br><span class="line"><span class="tag">    <span class="attr">controls</span></span></span><br><span class="line"><span class="tag">    <span class="attr">loop</span></span></span><br><span class="line"><span class="tag">    <span class="attr">width</span>=<span class="string">&quot;400&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">src</span>=<span class="string">&quot;http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4&quot;</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">p</span>&gt;</span>当前浏览器不支持video标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="video点播与直播"><a href="#video点播与直播" class="headerlink" title="video点播与直播"></a>video点播与直播</h2><p> H5 video目前所有浏览器都支持的视频格式是MP4格式，所以mp4应当是点播web视频的首选格式。<br>而在直播视频上，H5 video只在移动端原生支持HLS流的直播视频(Mac safari video标签也支持， PC Chrome不支持)，其他直播流（如FLV）就需要Flash插件的支持。</p>
<h2 id="video与206状态码"><a href="#video与206状态码" class="headerlink" title="video与206状态码"></a>video与206状态码</h2><p>video播放mp4时，发的依然是get请求，但http返回206状态码， 即partial Content。有关206状态码的相关内容，可以参考下文</p>
<ul>
<li><a target="_blank" rel="noopener" href="http://blog.aijc.net/server/2015/11/12/HTTP%E5%8D%8F%E8%AE%AE206%E7%8A%B6%E6%80%81%E7%A0%81">Http协议206状态码</a></li>
</ul>
<h2 id="终止视频下载"><a href="#终止视频下载" class="headerlink" title="终止视频下载"></a>终止视频下载</h2><p>video.pause() 可以暂停视频播放，但并不能停止视频资源的继续加载，媒体元素会继续加载知道被垃圾回收机制回收。<br>要在暂停播放后立即停止，可使用以下方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">video.pause()</span><br><span class="line">video.src=<span class="string">&#x27;&#x27;</span></span><br><span class="line">video.removeAttribute(<span class="string">&#x27;src&#x27;</span>);</span><br></pre></td></tr></table></figure>

<h2 id="切换src地址后重新加载播放"><a href="#切换src地址后重新加载播放" class="headerlink" title="切换src地址后重新加载播放"></a>切换src地址后重新加载播放</h2><p>修改video src 地址后，视频并不会重新的地址加载视频，重新加载可以使用以下方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">video.src=<span class="string">&#x27;新视频地址&#x27;</span></span><br><span class="line">video.load()</span><br><span class="line">video.play()</span><br></pre></td></tr></table></figure>

<h2 id="防止iOS上默认全屏播放"><a href="#防止iOS上默认全屏播放" class="headerlink" title="防止iOS上默认全屏播放"></a>防止iOS上默认全屏播放</h2><p>ios10及以后的版本，可以通过给video标签加playsinline属性防止iOS默认全屏播放，ios9之前加webkit-playsinline属性，如果要兼容，则把两个属性都加上。</p>
<p>通过客户端添加配置UIwebview: webview.allowsInlineMediaPlayback = YES，不过还是要求在video元素上加playsinline属性<br>参考</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser">HTML5 inline video on iPhone vs iPad/Browser</a></li>
<li><a target="_blank" rel="noopener" href="https://developer.apple.com/documentation/uikit/uiwebview/1617960-allowsinlinemediaplayback">allowsInlineMediaPlayback</a></li>
</ul>
<h2 id="自动播放及播放控制"><a href="#自动播放及播放控制" class="headerlink" title="自动播放及播放控制"></a>自动播放及播放控制</h2><p>在移动端，有些浏览器支持添加autoplay属性后自动播放，有些设置 autoplay 和 muted属性也能自动播放，比如IOS 10+、Chrome。</p>
<p>如果想控制什么时候播放，且并不是用户触发的（如没有设置controls），那就设置muted属性，然后调用video.play()方法，隔300ms左右有后，再通过video.muted = false打开声音。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">vide.muted = <span class="literal">true</span>;</span><br><span class="line">video.play()</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    video.muted = <span class="literal">false</span></span><br><span class="line">&#125;, <span class="number">300</span>)</span><br></pre></td></tr></table></figure>

<p>iOS9及之前的版本要求有用户交互才能播放，即手动点击播放按钮或者有用户触发的click、touchend、键盘等事件，然后调用video.play() 方法播放。在iOS9之前，iOS Native可以通过UIWebView的mediaPlaybackRequiresUserAction属性来控制是否需要用户交互。</p>
<p>使用element.click()触发的click事件是否可以被人为是用户行为？不能<br>浏览器是如何知道是否是用户触发的事件？Event对象的只读属性isTrusted</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;test-ele&quot;</span>&gt;</span>这个元素监听事件<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> testEle = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#test-ele&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    testEle.addEventlistener(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="keyword">function</span> (<span class="params">evt</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 用户触发为true，script或EventTarget.dispatchEvent() 触发为false</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(evt.isTrusted);</span></span><br><span class="line"><span class="javascript">    &#125;, <span class="literal">false</span>);</span></span><br><span class="line"><span class="javascript">    testEle.click() <span class="comment">// 这个触发，evt.isTrusted = false</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>有关iOS 10对safari video的放松策略可以参考: <a target="_blank" rel="noopener" href="https://webkit.org/blog/6784/new-video-policies-for-ios/">New <video> Policies for iOS</a></p>
<h2 id="video-play-的Promise对象（可用于捕获视频播放错误）"><a href="#video-play-的Promise对象（可用于捕获视频播放错误）" class="headerlink" title="video.play() 的Promise对象（可用于捕获视频播放错误）"></a>video.play() 的Promise对象（可用于捕获视频播放错误）</h2><p>在Chrome上，如果没有设置video.muted属性，在非用户行为下，直接使用video.play() 播放，会收到 Uncaught (in promise) DOMException 的报错，视频也没有播放。在iOS下面，可能不会有任何报错，视频也没播放，这样就无法定位问题。</p>
<p>video.play() 会返回一个Promise对象，如果播放失败，可以通过返回的Promise catch到相关错误信息。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> pro = video.play();</span><br><span class="line"><span class="keyword">if</span> (pro) &#123;  <span class="comment">// iOS9及以下版本不会返回Promise对象，做下兼容处理</span></span><br><span class="line">   pro.catch(<span class="function"><span class="params">err</span>=&gt;</span>&#123; <span class="built_in">console</span>.log(err) &#125;);   </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="TimeRanges-对象"><a href="#TimeRanges-对象" class="headerlink" title="TimeRanges 对象"></a>TimeRanges 对象</h2><p>在开始获取played属性的时候，以为会返回一个已经播放的时长，实际上返回的是TimeRanges对象，而且看到TimeRanges的length一直不变，当时一脸摸不着头脑，不知道有什么用。后来在做进度控制，需要知道视频已缓冲多少时，才弄明白。</p>
<p>video DOM对象有三个属性会返回TimeRanges对象，分别为video.played/ video.buffered/ video.seekable</p>
<p>视频开始时只有一个播放时间段，如果不进行跳跃观看，就一直只有一个时间段，即 TimeRanges.length 值为1；如果进行了跳跃观看（如从2分钟，突然跳进到15分钟的位置），而跳跃内容并没有缓冲完毕，则会出现两个时间段，这时TimeRanges的length为2。所以TimeRanges个数会随着跳跃观看未缓冲完成的内容而增加，随着缓冲的完成而减少，最少为1个，即从开头到结尾。</p>
<hr>
<h2 id=""><a href="#" class="headerlink" title="|==========|  |===========| |"></a>|==========|  |===========| |</h2><p>0         5        15  19       21</p>
<p>TimeRanges对象有一个length属性和start()、play()两个方法：TimeRanges:<br>    length: 1      // 代表当前播放视频存在的播放段<br>    play(index)    // 获取指定播放段的播放（缓冲）开始时间，index从0开始取，以秒计<br>    end(index)     // 获取指定播放段的播放（缓冲）结束时间<br>要获取第一段的开始时间，使用TimeRanges.start(0)，结束时间为TimeRanges.end(0)，第二段TimeRanges.start(1)，以此类推<br>参考</p>
<ul>
<li>Media buffering, seeking, and time ranges: (<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges">https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges</a>)</li>
<li>Time​Ranges: (<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges">https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges</a>)</li>
</ul>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"><i class="fa fa-tag"></i> 前端</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/DOM%E4%BA%8B%E4%BB%B6%E6%B5%81.html" rel="prev" title="DOM事件流">
                  <i class="fa fa-chevron-left"></i> DOM事件流
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/%E5%85%8D%E8%B4%B9cdn%EF%BC%9Ajsdelivr-github-%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95.html" rel="next" title="免费cdn：jsdelivr+github 使用方法">
                  免费cdn：jsdelivr+github 使用方法 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments" id="lv-container" data-id="city" data-uid="MTAyMC82MDk1Ni8zNzQyNg=="></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2025</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Rafa</span>
</div>
<div class="wordcount">
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
      <span>站点总字数：</span>
    <span title="站点总字数">38k</span>
  </span>
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span>站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">34 分钟</span>
  </span>
</div>

    </div>
  </footer>

  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>
  <div class="sidebar-dimmer"></div>
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script size="100" alpha="0.3" zIndex="-1" src="https://unpkg.com/ribbon.js@1.0.2/dist/ribbon.min.js"></script>
  <script src="https://unpkg.com/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/jquery@3.6.3/dist/jquery.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script>

  <script src="https://unpkg.com/hexo-generator-searchdb@1.4.1/dist/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>



  <script src="/js/third-party/fancybox.js"></script>


  




<script src="/js/third-party/comments/livere.js"></script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/hijiki.model.json"},"display":{"position":"left","width":160,"height":280},"mobile":{"show":false},"react":{"opacityDefault":1,"opacityOnHover":1},"log":false,"tagMode":false});</script></body>
</html>
